<nz-modal [(nzVisible)]="isVisible"
          [nzCentered]="true"
          [nzTitle]="modalTitle"
          [nzContent]="editModalContent"
          [nzFooter]="editModalFooter"
          (nzOnCancel)="close()">
  <ng-template #modalTitle>
    <ng-container i18n="@@onboarding.complete.title">We've created a project for</ng-container>
    <span style="display:inline-block;padding: 0 5px; font-weight: 600">{{currentOrg.name}}</span>
    <ng-container i18n="@@onboarding.complete.title-suffix">.</ng-container>
  </ng-template>
  <ng-template #editModalContent>
    <div class="onboarding-complete">
      <div i18n="@@onboarding.complete.first-paragraph">Projects start with two default environments:</div>
      <ul>
        <li>Prod</li>
        <li>Dev</li>
      </ul>

      <div class="paragraph" i18n="@@onboarding.complete.second-paragraph">Each environment has its own SDK secret, you can develop and test in Dev before rolling out to Prod.</div>
    </div>
  </ng-template>

  <ng-template #editModalFooter>
    <button nz-button nzType="primary" (click)="getStarted()">
      <span i18n="@@common.get-started">Get started</span>
    </button>
  </ng-template>
</nz-modal>
